<!--
  -    Copyright (c) 2018-2025, gewu All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the gewucn.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: gewu
  -->
  <template>
    <div class="execution">
        <el-card class="box-card btn-search page-search">
            <div slot="header" class="clearfix">
                <div class="btn-box">
                    <el-button
                            type="info"
                            icon="el-icon-refresh-left"
                            @click="refreshChange()"
                    ></el-button
                    >
                    <el-button id="gwButton"
                               type="primary"
                               style="backgroundColor:#E1b980"
                               icon="el-icon-circle-plus-outline"
                               v-if="permissions.ems_emsreporder_add"
                               @click="$refs.crud.rowAdd()"
                    >新增</el-button
                    >
                    <el-button
                            type="success"
                            icon="el-icon-edit"
                            v-if="permissions.ems_emsreporder_edit"
                            :disabled="single"
                            @click="handleEdit"
                    >编辑</el-button
                    >
                    <el-button
                            type="danger"
                            icon="el-icon-circle-close"
                            v-if="permissions.ems_emsreporder_del"
                            @click.native="handleDel()"
                            :disabled="multiple"
                    >删除</el-button
                    >
                    <el-button
                            type="check"
                            icon="el-icon-download"
                            @click="exportExcel"
                    >导出</el-button
                    >
                </div>
                <div class="icon-box">
                    <i class="el-icon-search" @click="searchShow"></i>
                    <i class="el-icon-refresh" @click="refreshChange"></i>
                    <i class="el-icon-goods"></i>
                    <i class="el-icon-setting" @click="columnShow"></i>
                    <i class="icon-zuixiaohua" />
                </div>
            </div>

        </el-card>
        <basic-container>
            <avue-crud
                    ref="crud"
                    v-model="form"
                    :page.sync="page"
                    :data="tableData"
                    :permission="permissionList"
                    :table-loading="tableLoading"
                    :option="tableOption"
                     :before-open="handleOpenBefore"
                    @selection-change="selectionChange"
                    @on-load="getList"
                    @search-change="searchChange"
                    @refresh-change="refreshChange"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    @row-update="handleUpdate"
                    @row-save="handleSave"
                    @row-del="handleDel"
                     @cell-click="cellClick"
                     :cell-style="cellStyle"
            >
            <template slot="handlerId" slot-scope="scope">
          {{ scope.row.handlerName }}
        </template>
        <template slot="acceptorId" slot-scope="scope">
          {{ scope.row.acceptorName }}
        </template>
        <template slot="applyUserId" slot-scope="scope">
          {{ scope.row.applyUserId }}
        </template>
          <template slot="fileId" slot-scope="scope">
          {{ scope.row.fileId }}
        </template>
             <template slot="handlerIdForm" slot-scope="scope">
            <el-input v-model="formName.handlerName" @focus="selectUserDia('handlerName','handlerId')" placeholder="请选择处理人" />
          </template>
           <template slot="acceptorIdForm" slot-scope="scope">
            <el-input v-model="formName.acceptorName" @focus="selectUserDia('acceptorName','acceptorId')" placeholder="请选择验收人" />
          </template>
          <template slot="applyUserIdForm" slot-scope="scope">
            <el-input v-model="formName.applyUserName" @focus="selectUserDia('applyUserName','applyUserId')" placeholder="请选择申请人" />
          </template>
          <template slot="fileIdForm" slot-scope="scope"> 
            <el-upload
          ref="upload"
            class="upload-demo"
            action="/admin/sys-file/upload"
            name="file"
            :headers="headers"
            :on-success="handleAvatarSuccess"
            :file-list="fileList"
             :auto-upload="true"
              :on-change="handleFileChange"
              :before-remove="handleFileRemove"
          >
           <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
           </template>
            
         
                <template slot="header">
                    <IconTitle class="selfTitle" title="外委维修" imgUrl="yunwei" />
                </template>

            </avue-crud>
        </basic-container>
        <el-drawer
      class="drawerStyle"
      title="工单详情"
      :show-close="false"
      :visible.sync="detail"
      direction="rtl"
      size="40%"
      append-to-body
    >
      <div>
        <div>
          <span class="labelS">工单编号：</span>
          <span class="contentS">{{detailInfo.orderNum}}</span>
        </div>
        <div>
          <span class="labelS">设备编号：</span>
          <span class="contentS">{{detailInfo.deviceNum}}</span>
        </div>
        <div>
          <span class="labelS">设备名称：</span>
          <span class="contentS">{{detailInfo.deviceName}}</span>
        </div>
        
      </div>
      <div class="statusList">
        <span class="labelS">故障描述</span>

        <span class="statusContent">{{detailInfo.remark}}</span>
      </div>
      <div class="line"></div>
      <div>
        <div class="icon-style">
          <div class="con-right">
            <div class="my-steps-box">
              <template v-for="(item, index) in menulist">
                <div
                  :class="[
                    'step-item',
                    activeMenu == index ? 'step-active' : '',
                  ]"
                  :key="index"
                >
                  <div class="top-title">
                    <span class="text">{{ item.label }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="con-left" id="scrollBox">
               <el-card shadow="always" class="box-card">
                   <div  class="tableTitle">维修时间轴</div>
                   <div class="vertical">
            <el-card shadow="always" class="box-card" v-for="item in 4" :key="item">
              <div>
                <div class="headerStyle">
                    <span class="dottedS"></span>
                  <i class="el-icon-date" style="color: #0ccb82"></i>
                  <span style="color: #0ccb82">任务节点：报销</span>
                  <i class="el-icon-arrow-up status"></i>
                </div>
                <div class="contentStyle">
                  <div class="boxContent">
                    <span class="desc">故障描述：漏气</span>
                    <span class="status">
                      <i class="el-icon-success"></i>
                      正常
                    </span>
                  </div>
                  <div>
                    <span class="label">处理人：</span>
                      <span class="content">江龙</span>
                      </div>
                  <div>
                      <span class="label">执行时间：</span>
                         <span class="content"> 2021/11/21 12:00:00</span>
                          </div>
                  <div class="line"></div>
                  <div>
                    <span></span>
                    <span class="label timeTotal">用时：</span>
                    <span>6时32分</span>
                  </div>
                </div>
              </div>
              
            </el-card>
            </div>
               </el-card>
          </div>
        </div>
      </div>
    </el-drawer>
     <SelectliableUser
      ref="selectLiable"
      v-if="selectLiableDia"
      :changeidentityDia.sync="selectLiableDia"
      @closeSelect='selectUser'
    ></SelectliableUser>
    </div>
</template>
<script>
    import {fetchList,getObj,addObj,putObj,delObj} from "@/api/ems/repair/outsourced";
    import {tableOption} from '@/const/crud/ems/repair/outsourced'
    import { mapGetters } from "vuex";
    import jQuery from "jquery";
    import IconTitle from "@/components/icon-title/index.vue";
    import SelectliableUser from "@/views/ems/equipment/components/selectliableUser.vue";
    import store from "@/store";
    export default {
        name: 'emsreporder',
        components: {
            IconTitle,SelectliableUser
        },
        data() {
            return {
                tableData: [],
                searchForm: {}, // 查询参数
                single: true,  // 非单个禁用
                multiple: true, // 非多个禁用
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20, // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption,
                ids: [],
                selectionList:[],
                detail: false,
                activeMenu: 0,
                menulist: [
                  {
                    label: "审批信息",
                  },
                  {
                    label: "计划详情",
                  },
                ],
                 selectLiableDia: false,
                 form:{},
                 formName:{},
                 newName:'',
                 newId:'',
                 headers: {
        Authorization: "Bearer " + store.getters.access_token,
       
      },
      fileList:[],
      imgArray:[],
      detailInfo:{}
            };
        },
        computed: {
            ...mapGetters(["permissions","theme"]),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permissions.ems_emsreporder_add, false),
                    delBtn: this.vaildData(this.permissions.ems_emsreporder_del, false),
                    editBtn: this.vaildData(this.permissions.ems_emsreporder_edit,false),
                };
            },
        },
        mounted() {
            this.initElement();
            this.changeThme();
        },
        methods: {
           cellStyle(data) {
      // 表格的第二列加上小手和padding为0
      if (data.columnIndex === 2) {
        return "color:#02b980;cursor:pointer";
      }
    },
     handleOpenBefore(show, type){
       window.boxType = type;
       if (type === "add") {
         for(let key  in this.form){
            this.form[key] = undefined
           
            }
             for(let key  in this.formName){
           
            this.formName[key] = undefined
            }
      }
      show();
    },
    cellClick(row, column) {
     
      if (column.property === "orderNum") {
        this.$router.push({
          path: "/ems/repair/outsourced/detail",
          query: { id: row.id },
        });
      } else {
        if(column.label!='操作'){
          this.detailInfo =row;
          this.detail = true;
        }
        
      }
    },
         selectUserDia(m,n) {
      this.selectLiableDia = true;
      this.newName = m;
      this.newId = n;
      this.$nextTick(() => {
        this.$refs.selectLiable.open();
      });
    },
     selectUser(row) {
      this.formName[this.newName] = row.username;
      this.form[this.newId] = row.userId;
      this.selectLiableDia = false;
    },
            initElement() {
                var mediumb = document.createElement("b"); //思路一样引入中间元素
                jQuery(".avue-crud__tip").after(mediumb);
                jQuery(".selfTitle").after(jQuery(".avue-crud__tip"));
                jQuery(mediumb).after(jQuery(".selfTitle"));
                jQuery(mediumb).remove();
            },
            selectionChange(list) {
                this.selectionList=list
                this.single = list.length !== 1;
                this.multiple = !list.length;
                this.ids = list.map((item) => item.id);
            },

            columnShow() {
                this.$refs.crud.$refs.dialogColumn.columnBox = !0;
            },
            // 搜索框显示与否
            searchShow() {
                this.$refs.crud.$refs.headerSearch.searchShow = !this.$refs.crud.$refs.headerSearch.searchShow;
            },

            // 列表查询
            getList(page, params) {
                this.tableLoading = true;
                fetchList(
                        Object.assign({
                            current: page.currentPage,
                            size: page.pageSize,
                        },params,this.searchForm)).then((response) => {
                    this.tableData = response.data.data.records;
                    this.page.total = response.data.data.total;
                    this.tableLoading = false;
                })
                        .catch(() => {
                            this.tableLoading = false;
                        });
            },
            //编辑
            handleEdit(){
                var refsDate = this.$refs
                refsDate.crud.rowEdit(this.selectionList[0],this.selectionList[0].$index);
            },
            // 删除
            handleDel: function (row, index) {
                this.$confirm("是否确认删除所选数据项", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                        .then(() => {
                            let id = "";
                            if (row) {
                                id = row.id;
                            } else {
                                id = this.ids;
                            }
                            return delObj(id);
                        })
                        .then((data) => {
                            this.$message.success("删除成功");
                            this.getList(this.page);
                        });
            },
            // 更新
            handleUpdate: function (row,  index,done, loading) {
                putObj(row)
                        .then((data) => {
                            this.$message.success("修改成功");
                            done();
                            this.getList(this.page);
                        })
                        .catch(() => {
                            loading();
                        });
            },
            // 保存
            handleSave: function (row, done, loading) {
                addObj(this.form)
                        .then((data) => {
                            this.$message.success("添加成功");
                            done();
                            this.getList(this.page);
                        })
                        .catch(() => {
                            loading();
                        });
            },
            // 每页条数改变事件
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            // 当前页发生改变事件
            currentChange(current) {
                this.page.currentPage = current;
            },
            // 查询事件
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            // 刷新事件
            refreshChange() {
                this.getList(this.page);
            },
            // 导出excel
            exportExcel() {
                this.downBlobFile(
                        "/ems/emsreporder/export",
                        this.searchForm,
                        "emsreporder.xlsx"
                );
            },
            // 改变主题颜色
            changeThme(){
                //"#02b980"
                document.getElementById("gwButton").style.backgroundColor=this.theme;
            },
            handleAvatarSuccess(response, file, fileList) {
      
    this.fileList = fileList[0].response.data;
    this.form.fileId = this.fileList.fileId
    console.log(this.form)
    },
    // achiveFileList(){
    //   let arr = []
    //   this.fileList.map((item)=>{
    //       if(item.response){
    //           let id = item.response.data.fileId
    //           let newId = parseInt(id)
    //           arr.push(id);
    //       }
    //       this.imgArray = [...new Set(arr)]          
    //   })
    // },
    handleFileChange(file, fileList) {      
		this.fileList = fileList;     
		},
    handleFileRemove(file, fileList) {
      this.fileList = fileList;  
    },
    },
    };
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";
@import "@/styles/drawer.scss";
.statusList {
  margin-top: 20px;
  .labelS {
    color: #c1c8d2;
  }

  .statusContent {
    font-size: 14px;
  }
}
.icon-style {
  display: flex;
}
::v-deep.con-left {
  width: 80%;
  height: 400px;
  overflow-y: scroll;
  font-size: 12px;
  position: relative;
  .headerStyle {
      .dottedS{
          width: 10px;
          height: 10px;
          display: inline-block;
          border-radius: 50%;
          background-color: #666;
          position: absolute;
          left: -6px;
      }
    color: #0ccb82;
    i{
        margin-right: 25px;
    }
  }
   .vertical{
      border-left: 2px dashed #EDEEF2;
      position: relative;
      padding-left: 10px;
      .el-card__body{
        padding: 10px 0 10px 10px;
      }
   }
  .contentStyle{
      padding: 10px;
      .line{
          border: 1px solid rgba(236, 240, 244, 100);
          margin: 15px 0;
      }
  }
   .status{
          float: right;
          margin-right: 10px;
          i{
               color: #0ccb82;
                margin-right: 5px;
          }
      }
  .boxContent{
      background-color: #F6F6FC;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
     margin: 10px 0 15px;
     position: relative;
      &::before{
          content: "";
          position: absolute;
          height: 50px;
          width: 5px;
          background-color: #DEDEE4;
          
      }
      .desc{
          margin-left: 10px;
      }
    
  }
   .label{
         color: #999;
         margin-right: 10px;
         display: inline-block;
         margin-bottom: 10px;
         width: 70px;
     }
     .content{
         color: #101010;
     }
     .timeTotal{
         margin-right: 20px;
     }
}
.con-right {
  width: 20%;
  border-right: 1px solid #ecf0f4;
  padding-left: 23px;
  text-align: center;
  box-sizing: border-box;

  .my-steps-box {
    font-size: 12px;
    margin-top: 50px;
    .step-item {
      margin-bottom: 15px;
      padding: 6px 0;
      position: relative;
      .text {
        cursor: pointer;
      }
    }
    .step-item.step-active {
      border-right: 2px solid #26ae61;
      .text {
        color: $theme;
      }
    }
    .step-item:nth-last-child(1) .line {
      display: none;
    }
  }
}
</style>